

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/blog/img/fluid.png">
  <link rel="icon" href="/blog/img/fluid.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="Solace">
  <meta name="keywords" content="">
  
    <meta name="description" content="欢迎收看js大型连续剧第三集之  语言基础">
<meta property="og:type" content="article">
<meta property="og:title" content="JS红宝书第三章学习笔记">
<meta property="og:url" content="https://isolace.gitee.io/blog/2023/11/15/JS%E7%BA%A2%E5%AE%9D%E4%B9%A6%E7%AC%AC%E4%B8%89%E7%AB%A0%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/index.html">
<meta property="og:site_name" content="Solace的博客">
<meta property="og:description" content="欢迎收看js大型连续剧第三集之  语言基础">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="g:/typora/js/img/%E6%B5%AE%E7%82%B9%E6%95%B0%E5%AD%98%E5%82%A8%E7%BB%93%E6%9E%84.jpg">
<meta property="og:image" content="https://pic4.zhimg.com/80/v2-cb00bb5265f413e66aa7162df5bb84b7_1440w.webp">
<meta property="article:published_time" content="2023-11-15T03:22:12.000Z">
<meta property="article:modified_time" content="2024-03-26T11:57:19.750Z">
<meta property="article:author" content="Solace">
<meta property="article:tag" content="Javascript">
<meta property="article:tag" content="红宝书">
<meta property="article:tag" content="web">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="g:/typora/js/img/%E6%B5%AE%E7%82%B9%E6%95%B0%E5%AD%98%E5%82%A8%E7%BB%93%E6%9E%84.jpg">
  
  
    <meta name="referrer" content="no-referrer-when-downgrade">
  
  
  <title>JS红宝书第三章学习笔记 - Solace的博客</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />



  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/blog/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/blog/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/blog/css/highlight-dark.css" />
  




  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"isolace.gitee.io","root":"/blog/","version":"1.9.5-a","typing":{"enable":true,"typeSpeed":60,"cursorChar":"|","loop":false,"scope":["home"]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"left","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":true,"follow_dnt":true,"baidu":null,"google":{"measurement_id":null},"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/blog/local-search.xml","include_content_in_search":true};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/blog/js/utils.js" ></script>
  <script  src="/blog/js/color-schema.js" ></script>
  

  

  
    <!-- Google tag (gtag.js) -->
    <script async>
      if (!Fluid.ctx.dnt) {
        Fluid.utils.createScript("https://www.googletagmanager.com/gtag/js?id=", function() {
          window.dataLayer = window.dataLayer || [];
          function gtag() {
            dataLayer.push(arguments);
          }
          gtag('js', new Date());
          gtag('config', '');
        });
      }
    </script>
  

  

  

  

  



  
<meta name="generator" content="Hexo 6.3.0"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 70vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/blog/">
      <strong>Solace&#39;s Blog</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/">
                <i class="iconfont icon-home-fill"></i>
                <span>首页</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                <span>归档</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                <span>标签</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/about/">
                <i class="iconfont icon-user-fill"></i>
                <span>关于</span>
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              <i class="iconfont icon-search"></i>
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">
              <i class="iconfont icon-dark" id="color-toggle-icon"></i>
            </a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('/blog/img/default.png') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle">JS红宝书第三章学习笔记</span>
          
        </div>

        
          
  <div class="mt-3">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-author" aria-hidden="true"></i>
        Solace
      </span>
    
    
      <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="2023-11-15 11:22" pubdate>
          2023年11月15日 上午
        </time>
      </span>
    
  </div>

  <div class="mt-1">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-chart"></i>
        
          16k 字
        
      </span>
    

    
      <span class="post-meta mr-2">
        <i class="iconfont icon-clock-fill"></i>
        
        
        
          135 分钟
        
      </span>
    

    
    
      
        <span id="busuanzi_container_page_pv" style="display: none">
          <i class="iconfont icon-eye" aria-hidden="true"></i>
          <span id="busuanzi_value_page_pv"></span> 次
        </span>
        
      
    
  </div>


        
      </div>

      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar" style="padding-left: 2rem; margin-right: -1rem">
    <div id="toc">
  <p class="toc-header">
    <i class="iconfont icon-list"></i>
    <span>目录</span>
  </p>
  <div class="toc-body" id="toc-body"></div>
</div>



  </aside>


    </div>

    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div id="board">
          <article class="post-content mx-auto">
            <h1 id="seo-header">JS红宝书第三章学习笔记</h1>
            
            
              <div class="markdown-body">
                
                <h1 id="第三章-语言基础"><a href="#第三章-语言基础" class="headerlink" title="第三章 语言基础"></a>第三章 语言基础</h1><h2 id="3-1-语法"><a href="#3-1-语法" class="headerlink" title="3.1 语法"></a>3.1 语法</h2><h3 id="3-1-1-区分大小写"><a href="#3-1-1-区分大小写" class="headerlink" title="3.1.1 区分大小写"></a>3.1.1 区分大小写</h3><p>一切都区分大小写</p>
<h3 id="3-1-2-标识符"><a href="#3-1-2-标识符" class="headerlink" title="3.1.2 标识符"></a>3.1.2 标识符</h3><ul>
<li><strong>概念</strong>：变量、函数、属性或函数参数的名称</li>
<li>规则：<ul>
<li>可以由字母、数字、下划线（ _ ）或美元符号（$）构成；</li>
<li>第一个字符不能是数字</li>
<li>关键字、保留字、<code>true</code>、<code>false</code>、<code>null</code> 不能作为标识符</li>
</ul>
</li>
<li>惯例：ECMAScript标识符使用驼峰形式，第一个单词首字母小写，后面每个单词的首字母大写。（建议，非强制）</li>
</ul>
<h3 id="3-1-3-注释"><a href="#3-1-3-注释" class="headerlink" title="3.1.3 注释"></a>3.1.3 注释</h3><p>单行：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">//这是单行注释</span><br></code></pre></td></tr></table></figure>

<p>多行：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">/*这是</span><br><span class="hljs-comment">多行</span><br><span class="hljs-comment">注释*/</span><br></code></pre></td></tr></table></figure>

<h3 id="3-1-4-严格模式"><a href="#3-1-4-严格模式" class="headerlink" title="3.1.4 严格模式"></a>3.1.4 严格模式</h3><ul>
<li><p>ES5增加了<strong>严格模式</strong>（strict mode）概念，ES3的一些不规范写法会被处理、对于不安全的活动将抛出错误</p>
</li>
<li><p>启用：在脚本开头加上</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-meta">&quot;use strict&quot;</span>;<br></code></pre></td></tr></table></figure>

<p>这是<strong>预处理指令</strong>。</p>
</li>
<li><p>也可以单独指定一个函数在严格模式下执行：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">function</span> <span class="hljs-title function_">doSth</span>(<span class="hljs-params"></span>)&#123;<br>	<span class="hljs-string">&quot;use strict&quot;</span>;<br>	<span class="hljs-comment">//函数体</span><br>&#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h3 id="3-1-5-语句"><a href="#3-1-5-语句" class="headerlink" title="3.1.5 语句"></a>3.1.5 语句</h3><ul>
<li>单条语句以分号结尾。省略分号表示由解析器确定语句结尾。推荐加分号</li>
<li>多条语句利用大括号<code>&#123;&#125;</code>合并形成代码块</li>
</ul>
<h2 id="3-2-关键字与保留字"><a href="#3-2-关键字与保留字" class="headerlink" title="3.2 关键字与保留字"></a>3.2 关键字与保留字</h2><p>关键字不能用作标识符或属性名：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">break</span>        <span class="hljs-keyword">do</span>         <span class="hljs-keyword">in</span>        <span class="hljs-keyword">typeof</span>      <span class="hljs-keyword">case</span>        <span class="hljs-keyword">else</span><br><span class="hljs-keyword">instanceof</span>   <span class="hljs-keyword">var</span>        <span class="hljs-keyword">catch</span>     <span class="hljs-keyword">export</span>      <span class="hljs-keyword">new</span>         <span class="hljs-keyword">void</span><br><span class="hljs-keyword">class</span>        <span class="hljs-title class_">extends</span>    <span class="hljs-keyword">return</span>    <span class="hljs-keyword">while</span>       <span class="hljs-keyword">const</span>       <span class="hljs-keyword">finally</span> <br><span class="hljs-variable language_">super</span>        <span class="hljs-keyword">with</span>       <span class="hljs-keyword">continue</span>  <span class="hljs-keyword">for</span>         <span class="hljs-keyword">switch</span>      <span class="hljs-keyword">yield</span> <br><span class="hljs-keyword">debugger</span>     <span class="hljs-keyword">function</span>   <span class="hljs-variable language_">this</span>      <span class="hljs-keyword">default</span>     <span class="hljs-keyword">if</span>          <span class="hljs-keyword">throw</span> <br><span class="hljs-keyword">delete</span>       <span class="hljs-keyword">import</span>     <span class="hljs-keyword">try</span><br></code></pre></td></tr></table></figure>

<p>保留字：</p>
<figure class="highlight vbnet"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs vbnet">始终保留：<br><span class="hljs-keyword">enum</span><br>严格模式下保留：<br><span class="hljs-keyword">implements</span>    package    <span class="hljs-keyword">public</span>    <span class="hljs-keyword">interface</span><br><span class="hljs-keyword">protected</span>     <span class="hljs-keyword">static</span>     <span class="hljs-keyword">let</span>       <span class="hljs-keyword">private</span><br>模块代码中保留：<br><span class="hljs-built_in">await</span><br></code></pre></td></tr></table></figure>

<p>不能用作标识符，但目前还可以用作对象的属性名。（<strong>不要这么做</strong>）</p>
<h2 id="3-3-变量"><a href="#3-3-变量" class="headerlink" title="3.3 变量"></a>3.3 变量</h2><blockquote>
<p>ECMAScript变量可以用于保存任何类型的数据。用<code>var</code>、<code>const</code>和<code>let</code>声明变量。</p>
</blockquote>
<p>（详见<a href="#4.2.2 变量声明">4.2.2 变量声明</a>）</p>
<h3 id="3-3-1-var关键字"><a href="#3-3-1-var关键字" class="headerlink" title="3.3.1 var关键字"></a>3.3.1 <code>var</code>关键字</h3><p><a href="#01. 使用var 的函数作用域声明">详见4.2.2.1 使用var 的函数作用域声明</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">var</span> a;<span class="hljs-comment">//未初始化时为undefined</span><br><span class="hljs-keyword">var</span> b = <span class="hljs-string">&quot;Hello World&quot;</span>;<br><span class="hljs-keyword">var</span> c = <span class="hljs-number">100</span>;<br>c = <span class="hljs-string">&quot;abcd&quot;</span>;<span class="hljs-comment">//不推荐改变变量保存值的类型</span><br></code></pre></td></tr></table></figure>

<p>严格模式不能定义名为<code>eval</code>和<code>arguments</code>的变量，会导致语法错误</p>
<h5 id="01-var声明作用域"><a href="#01-var声明作用域" class="headerlink" title="01. var声明作用域"></a>01. <code>var</code>声明作用域</h5><p><code>var</code>定义的变量会成为包含它的函数的<strong>局部变量</strong>（函数作用域，不受<code>if&#123;&#125;</code>块作用域的限制）。</p>
<ul>
<li>在函数内利用<code>var</code>定义的变量将在函数退出时销毁；</li>
<li>在函数内定义变量省略<code>var</code>时可以创建全局变量（严格模式会抛出<code>ReferenceError</code>）</li>
</ul>
<h5 id="02-var声明提升"><a href="#02-var声明提升" class="headerlink" title="02. var声明提升"></a>02. <code>var</code>声明提升</h5><p>将所有的变量声明都拉到函数作用域的顶部；<br>反复多次使用<code>var</code>声明同一个变量也没有问题</p>
<h3 id="3-2-2-let声明"><a href="#3-2-2-let声明" class="headerlink" title="3.2.2 let声明"></a>3.2.2 <code>let</code>声明</h3><p><a href="#02. 使用let 的块级作用域声明">详见4.2.2.2 使用let的块级作用域声明</a></p>
<p><code>let</code>声明的范围是块作用域</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">if</span>(<span class="hljs-number">1</span>)&#123;<span class="hljs-comment">//while,for同理</span><br>	<span class="hljs-keyword">var</span> a1 = <span class="hljs-number">1</span>;<br>	<span class="hljs-keyword">let</span> a2 = <span class="hljs-number">2</span>;<br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a1,a2);<span class="hljs-comment">//a2 is undefined;</span><br></code></pre></td></tr></table></figure>

<p><code>let</code>不允许重复定义，但嵌套使用相同的标识符不会出错：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> age = <span class="hljs-number">30</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(age);<span class="hljs-comment">// 30</span><br><span class="hljs-keyword">if</span> (<span class="hljs-literal">true</span>) &#123;<br>	<span class="hljs-keyword">let</span> age = <span class="hljs-number">26</span>;<br>	<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(age);<span class="hljs-comment">// 26 </span><br>&#125;<br></code></pre></td></tr></table></figure>

<p>同一标识符同时用<code>let</code>和<code>var</code>也会出错</p>
<h5 id="01-暂时性死区"><a href="#01-暂时性死区" class="headerlink" title="01. 暂时性死区"></a>01. 暂时性死区</h5><p>不能以任何形式引用未声明或在之后声明的变量。在<code>let</code>声明之前的执行时间被称为“暂时性死区”，在此阶段引用任何后面才声明的变量会抛出<code>ReferenceError</code></p>
<h5 id="02-全局声明"><a href="#02-全局声明" class="headerlink" title="02. 全局声明"></a>02. 全局声明</h5><p>使用<code>let</code>在全局作用域声明的变量不会成为<code>window</code>对象的属性（<code>var</code>声明的变量会）</p>
<h5 id="03-条件声明"><a href="#03-条件声明" class="headerlink" title="03. 条件声明"></a>03. 条件声明</h5><p>由于<code>let</code>的块作用域限制，使其不能依赖条件声明模式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">	 <span class="hljs-keyword">let</span> name = <span class="hljs-string">&#x27;Nicholas&#x27;</span>;</span><br><span class="language-javascript">	 <span class="hljs-keyword">let</span> age = <span class="hljs-number">36</span>;</span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">	 <span class="hljs-comment">// 假设脚本不确定页面中是否已经声明了同名变量</span></span><br><span class="language-javascript">	 <span class="hljs-comment">// 那它可以假设还没有声明过</span></span><br><span class="language-javascript">	 <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> name === <span class="hljs-string">&#x27;undefined&#x27;</span>) &#123;</span><br><span class="language-javascript">		 <span class="hljs-keyword">let</span> name;</span><br><span class="language-javascript">	 &#125;</span><br><span class="language-javascript">	 <span class="hljs-comment">// name被限制在if &#123;&#125; 块的作用域内</span></span><br><span class="language-javascript">	 <span class="hljs-comment">// 因此这个赋值形同全局赋值</span></span><br><span class="language-javascript">	 name = <span class="hljs-string">&#x27;Matt&#x27;</span>;</span><br><span class="language-javascript">	 <span class="hljs-keyword">try</span> (age) &#123;</span><br><span class="language-javascript">	 <span class="hljs-comment">// 如果age没有声明过，则会报错</span></span><br><span class="language-javascript">	 &#125;</span><br><span class="language-javascript">	 <span class="hljs-keyword">catch</span>(error) &#123;</span><br><span class="language-javascript">		 <span class="hljs-keyword">let</span> age;</span><br><span class="language-javascript">	 &#125;</span><br><span class="language-javascript">	 <span class="hljs-comment">// age被限制在catch &#123;&#125;块的作用域内</span></span><br><span class="language-javascript">	 <span class="hljs-comment">// 因此这个赋值形同全局赋值</span></span><br><span class="language-javascript">	 age = <span class="hljs-number">26</span>;</span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h5 id="04-for循环中的let声明"><a href="#04-for循环中的let声明" class="headerlink" title="04. for循环中的let声明"></a>04. <code>for</code>循环中的<code>let</code>声明</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">//实例1</span><br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; <span class="hljs-number">5</span>; ++i) &#123;<br>    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(i), <span class="hljs-number">0</span>)<br>&#125;<span class="hljs-comment">//输出5、5、5、5、5</span><br><span class="hljs-comment">//实例2</span><br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; <span class="hljs-number">5</span>; ++i) &#123;<br>    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(i), <span class="hljs-number">0</span>)<br>&#125;<span class="hljs-comment">//输出0、1、2、3、4</span><br></code></pre></td></tr></table></figure>

<ul>
<li>实例1中，回调函数在循环结束后才执行，此时<code>i</code>已经赋值为5；</li>
<li>实例2中，JavaScript引擎会在每次迭代循环声明一个新的迭代变量，每个<code>setTimeout</code>引用的都是不同的迭代变量。<br><code>for-in</code>和<code>for-of</code>同样适用</li>
</ul>
<h3 id="3-3-3-const声明"><a href="#3-3-3-const声明" class="headerlink" title="3.3.3 const声明"></a>3.3.3 <code>const</code>声明</h3><p>[详见03. 使用const 的常量声明](#03. 使用const 的常量声明)</p>
<ul>
<li>利用<code>const</code>声明变量时必须同时初始化，并且不能修改<code>const</code>声明的变量（<code>SyntaxError</code>），其他行为与<code>let</code>相同</li>
<li><code>const</code>声明的限制只适用于它指向的变量的引用，如果<code>const</code>变量引用的是一个对象，那么修改这个对象内部的属性并不违反。</li>
<li>循环中不能用<code>const</code>来声明变化的迭代变量</li>
</ul>
<h3 id="3-3-4-声明风格及最佳实践"><a href="#3-3-4-声明风格及最佳实践" class="headerlink" title="3.3.4 声明风格及最佳实践"></a>3.3.4 声明风格及最佳实践</h3><h5 id="01-不使用var"><a href="#01-不使用var" class="headerlink" title="01. 不使用var"></a>01. 不使用<code>var</code></h5><p>变量有了明确的作用域、声明位置以及不变的值，提升代码质量。</p>
<h5 id="02-const优先，let次之"><a href="#02-const优先，let次之" class="headerlink" title="02. const优先，let次之"></a>02. <code>const</code>优先，<code>let</code>次之</h5><p>只有在提前知道某变量未来会有修改时再使用<code>let</code>。</p>
<h2 id="3-4-数据类型"><a href="#3-4-数据类型" class="headerlink" title="3.4 数据类型"></a>3.4 数据类型</h2><p>6种简单数据类型（原始类型）：Undefined、Null、Boolean、Number、String和Symbol（ES6新增）<br>复杂数据类型：Object（对象）<a href="#data-type2" id="data-type1">相关见4.1</a></p>
<h3 id="3-4-1-typeof操作符"><a href="#3-4-1-typeof操作符" class="headerlink" title="3.4.1 typeof操作符"></a>3.4.1 <code>typeof</code>操作符</h3><ul>
<li><p>返回值：</p>
<ul>
<li>“undefined” 表示值未定义；</li>
<li>“boolean” 表示值为布尔值；</li>
<li>“string” 表示值为字符串；</li>
<li>“number” 表示值为数值； </li>
<li>“object” 表示值为对象或null；</li>
<li>“function” 表示值为函数；</li>
<li>“symbol” 表示值为符号。</li>
</ul>
</li>
<li><p>参数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">typeof</span>(<span class="hljs-string">&quot;abcd&quot;</span>))<span class="hljs-comment">//&quot;string&quot;</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> <span class="hljs-string">&quot;abcd&quot;</span>)<span class="hljs-comment">//&quot;string&quot;</span><br><span class="hljs-comment">//不需要参数，但可以使用参数</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>null</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> <span class="hljs-literal">null</span>)<span class="hljs-comment">//&quot;object&quot;</span><br><span class="hljs-comment">//特殊值null被认为是对空对象的引用</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>严格来讲函数在ECMAScript中被认为是对象，但是函数也有自己特殊的属性，有必要通过<code>typeof</code>来区分函数和其他对象</p>
</li>
</ul>
<h3 id="3-4-2-Undefined类型"><a href="#3-4-2-Undefined类型" class="headerlink" title="3.4.2 Undefined类型"></a>3.4.2 <code>Undefined</code>类型</h3><ul>
<li><p>用<code>let</code>或<code>var</code>声明变量但未初始化时相当于给变量赋予了<code>undefined</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> message1; <br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(message1 == <span class="hljs-literal">undefined</span>); <span class="hljs-comment">// true</span><br><span class="hljs-keyword">let</span> message2 = <span class="hljs-literal">undefined</span>; <br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(message2 == <span class="hljs-literal">undefined</span>); <span class="hljs-comment">// true</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>对未声明变量只有<code>typeof</code>操作有效，返回”<code>undefined</code>“；（调用<code>delete</code>也不会报错，但这个操作没什么用，在严格模式下会抛出错误。）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> message; <br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(message); <span class="hljs-comment">// &quot;undefined&quot;</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(age); <span class="hljs-comment">// 报错，未被声明</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> message);<span class="hljs-comment">//&quot;undefined&quot;</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> age);<span class="hljs-comment">//&quot;undefined&quot;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>undefined</code>是一个假值</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> message; <span class="hljs-comment">//undefined</span><br><span class="hljs-comment">// age没有声明 </span><br><span class="hljs-keyword">if</span> (message) &#123; <br>	<span class="hljs-comment">// 这个块不会执行 </span><br>&#125; <br><span class="hljs-keyword">if</span> (!message) &#123; <br>	<span class="hljs-comment">// 这个块会执行 </span><br>&#125; <br><span class="hljs-keyword">if</span> (age) &#123; <br>	<span class="hljs-comment">// 这里会报错 </span><br>&#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h3 id="3-4-3-Null类型"><a href="#3-4-3-Null类型" class="headerlink" title="3.4.3 Null类型"></a>3.4.3 <code>Null</code>类型</h3><p><code>null</code>值表示一个空指针对象，定义将来要保存对象值的变量时建议用<code>null</code>初始化</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">if</span>(car != <span class="hljs-literal">null</span>)&#123;<br>	<span class="hljs-comment">//car是一个对象的引用</span><br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><p>undefined值是由null值派生而来的，他们表面上相等（<code>==</code>的转换）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-literal">null</span> == <span class="hljs-literal">undefined</span>)<span class="hljs-comment">//true</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>null</code>是假值</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> message = <span class="hljs-literal">null</span>;<br><span class="hljs-keyword">let</span> age;<br><span class="hljs-comment">// age没有声明 </span><br><span class="hljs-keyword">if</span> (message) &#123; <br>	<span class="hljs-comment">// 这个块不会执行 </span><br>&#125; <br><span class="hljs-keyword">if</span> (!message) &#123; <br>	<span class="hljs-comment">// 这个块会执行 </span><br>&#125; <br><span class="hljs-keyword">if</span> (age) &#123; <br>	<span class="hljs-comment">// 这里不会执行 </span><br>&#125;<br><span class="hljs-keyword">if</span> (!age)&#123;<br>	<span class="hljs-comment">//这里会执行</span><br>&#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h3 id="3-4-4-Boolean类型"><a href="#3-4-4-Boolean类型" class="headerlink" title="3.4.4 Boolean类型"></a>3.4.4 <code>Boolean</code>类型</h3><ul>
<li><p><code>Boolean</code>类型有两个字面值：<code>true</code>和<code>false</code></p>
</li>
<li><p>所有其他ECMAScript类型的值都有相对应布尔值的等价类型：<code>Boolean()</code>转型函数：任意类型 $\rightarrow$ 布尔型</p>
<table>
<thead>
<tr>
<th align="center">转换前数据类型</th>
<th align="center">转换后为<code>true</code></th>
<th align="center">转换后为<code>false</code></th>
</tr>
</thead>
<tbody><tr>
<td align="center">String</td>
<td align="center">非空字符串</td>
<td align="center">空字符串 “”</td>
</tr>
<tr>
<td align="center">Number</td>
<td align="center">非零（包括无穷）</td>
<td align="center">0、NaN</td>
</tr>
<tr>
<td align="center">Object</td>
<td align="center">任意对象</td>
<td align="center">null</td>
</tr>
<tr>
<td align="center">Undefined</td>
<td align="center">N&#x2F;A（不存在）</td>
<td align="center">undefined</td>
</tr>
</tbody></table>
</li>
</ul>
<h3 id="3-4-5-Number类型"><a href="#3-4-5-Number类型" class="headerlink" title="3.4.5 Number类型"></a>3.4.5 <code>Number</code>类型</h3><p>使用<code>IEEE 754</code>表示整数和浮点数</p>
<ul>
<li>十进制：直接写出来</li>
<li>八进制：第一个数字<code>0</code> + 相应的八进制数字（0<del>7），若超出&#96;0</del>7&#96;则省略前缀0作为十进制数<ul>
<li>严格模式下前缀<code>0</code>会抛出语法错误，应用<code>0o</code></li>
</ul>
</li>
<li>十六进制：前缀<code>0x</code> + 十六进制数字（0<del>9，A</del>F）</li>
</ul>
<p>利用不同进制创建的数字在所有数学操作中都被视为十进制值</p>
<h5 id="01-浮点值"><a href="#01-浮点值" class="headerlink" title="01.浮点值"></a>01.浮点值</h5><ul>
<li><p>书写：<br>必须有小数点，后面必须有至少一位数字；小数点前面可以省略；小数点后都是零则当成整数。<br>科学计数法：一个数值（整数或浮点数）+ ’ e ‘ 或 ‘ E ’ + 10的整数次幂（小于零表示小数）；</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> <span class="hljs-title class_">Num1</span> = <span class="hljs-number">3.125e7</span>; <span class="hljs-comment">// 等于31250000</span><br><span class="hljs-keyword">let</span> <span class="hljs-title class_">Num2</span> = <span class="hljs-number">3e-5</span>;    <span class="hljs-comment">//等于0.00003</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>默认ECMAScript会将小数点后至少包含6个0的浮点值转换成科学计数法</p>
</blockquote>
</li>
<li><p>误差：精确度最高17位小数，运算不如整数精确。</p>
<blockquote>
<p>原因：浮点数在计算机中使用<code>IEEE 754</code>标准，即由三部分组成：符号位、指数位和尾数位，他们都由二进制数表示。详见<a href="#f1">附录：计算机数字编码方式</a>。<img src="G:/typora/js/img/浮点数存储结构.jpg" srcset="/blog/img/loading.gif" lazyload alt="浮点数存储结构"></p>
</blockquote>
</li>
<li><p>将十进制小数换成二进制：（以6.36为例）</p>
<ol>
<li><p>整数部分除二取余（110）</p>
</li>
<li><p>小数部分乘二取余（0.01011100…）</p>
</li>
<li><p>合并结果（110.01011100…）</p>
<img src="https://pic4.zhimg.com/80/v2-cb00bb5265f413e66aa7162df5bb84b7_1440w.webp" srcset="/blog/img/loading.gif" lazyload width="700px"></li>
</ol>
</li>
<li><p>浮点数在计算机中的表示：（以6.36为例）</p>
<ol>
<li>将二进制结果转为尾数+阶码的计数方式：$1.10010111000010100011110\cdots\times2^2$</li>
<li>符号位：0</li>
<li>阶码（以float为例）：2的阶数转为二进制后的移码 - 1，在数值上等于偏置值（127）+ 阶数</li>
</ol>
<blockquote>
<p>反码：正数的反码是其本身；负数的反码除符号位外其他各位取<br>补码：正数的补码是其本身；负数的补码等于反码 + 1<br>移码：不论正负，将补码的符号位取反</p>
<p>详见<a href="#f1">附录：计算机数字编码方式</a></p>
</blockquote>
<p>$$<br>\begin{align}<br>2&amp;\rightarrow00000010(阶数二进制)\<br>00000010&amp;\rightarrow10000010(二进制移码)\<br>10000010&amp;\rightarrow10000001(移码-1)<br>\end{align}<br>$$</p>
<ol start="3">
<li>尾数：1001011100…，本身无限不循环则以<code>float（23位）</code>或<code>double（52位）</code>精度来截位，10010111000010100011110</li>
<li>符号位 + 阶码 + 尾数：0 10000001 10010111000010100011110</li>
</ol>
</li>
</ul>
<h5 id="02-值的范围"><a href="#02-值的范围" class="headerlink" title="02. 值的范围"></a>02. 值的范围</h5><ul>
<li>可表示的最大数值、最小数值：<code>Number.MAX_VALUE（1.797...e+308）</code>以及<code>Number.MIN_VALUE（5e-324）</code>。</li>
<li>若计算超出可表示范围则以<code>Infinity（正无穷大）</code>或<code>-Infinity（负无穷大）</code>表示。</li>
<li>判断一个数是否有限大：<code>isFinite()</code>函数，无穷大或无穷小则返回<code>false</code>。</li>
</ul>
<h5 id="03-NaN"><a href="#03-NaN" class="headerlink" title="03. NaN"></a>03. <code>NaN</code></h5><ul>
<li><p><code>Not a Number</code>，表示本应返回数值的操作失败，任何涉及<code>NaN</code>的操作始终返回<code>NaN</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">0</span>/<span class="hljs-number">0</span>)<span class="hljs-comment">//NaN</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">5</span>/<span class="hljs-number">0</span>)<span class="hljs-comment">//Infinity</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">5</span>/-<span class="hljs-number">0</span>)<span class="hljs-comment">//-Infinity</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">NaN</span>/<span class="hljs-number">10</span>)<span class="hljs-comment">//NaN</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>NaN不等于任何值，它本身也不例外</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">NaN</span> == <span class="hljs-title class_">NaN</span>)<span class="hljs-comment">//false</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>isNaN()</code>函数：传入参数判断是否 “不是数值”<br>该函数尝试将参数转换成数值，如数字字符串或布尔值。<br>不能转换成数值的值都会返回<code>true</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-built_in">isNaN</span>(<span class="hljs-title class_">NaN</span>));    <span class="hljs-comment">// true </span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-built_in">isNaN</span>(<span class="hljs-number">10</span>));     <span class="hljs-comment">// false，10是数值 </span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-built_in">isNaN</span>(<span class="hljs-string">&quot;10&quot;</span>));   <span class="hljs-comment">// false，可以转为数值10 </span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-built_in">isNaN</span>(<span class="hljs-string">&quot;blue&quot;</span>)); <span class="hljs-comment">// true，不可以转为数值 </span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-built_in">isNaN</span>(<span class="hljs-literal">true</span>));   <span class="hljs-comment">// false，可以转为数值1</span><br></code></pre></td></tr></table></figure></li>
</ul>
<h5 id="04-数值转换"><a href="#04-数值转换" class="headerlink" title="04. 数值转换"></a>04. 数值转换</h5><p>三个函数可以将非数值转换成数值：<code>Number()</code>、<code>parseInt()</code>、<code>parseFloat()</code>，可用于任何数据类型</p>
<ol>
<li><a id="hsNumber" style="color:#333333"><code>Number()</code></a>：函数的参数为<ul>
<li>布尔型时，<code>true</code>为1，<code>false</code>为0；</li>
<li>数值直接返回；</li>
<li><code>null</code>返回0；</li>
<li><code>undefined</code>返回<code>NaN</code>；</li>
<li>字符串按字符串格式：<ul>
<li>十进制数字、有效浮点值直接返回；</li>
<li>科学计数法、有效十六进制（0x）、八进制（0o）、二进制（0b）返回其对应的十进制数值；</li>
<li>空字符串返回0；</li>
<li>其他情况返回NaN。</li>
</ul>
</li>
<li>对象：调用<code>valueOf</code>方法并按上述规则转换返回的值；若转换结果是NaN则调用<code>toString()</code>方法，再按照转换字符串的规则转换</li>
</ul>
</li>
<li><code>parseInt()</code>：<ul>
<li>传入一个参数时：字符串最前面的空格会被忽略<ul>
<li>空字符串：NaN；</li>
<li>第一个字符不是数值字符或加减号：NaN；（小数点也会返回NaN）</li>
<li>第一个字符是数值字符、加减号：继续依次检测每个字符，直到检测到非数值字符或字符串末尾</li>
<li>0x开头会被解释为十六进制并返回十进制数；</li>
</ul>
</li>
<li>传入两个参数时：&#x3D;&#x3D;（建议）&#x3D;&#x3D;<br>第二个参数用于指定进制数，将第一个参数按照第二个参数指定的进制数解析并转换</li>
</ul>
</li>
<li><code>parseFloat()</code>：<ul>
<li>第一次出现的小数点有效；</li>
<li>始终忽略字符串开头的0；</li>
<li>十六进制始终返回0，因为该函数只解析十进制；</li>
<li>支持科学计数法。</li>
</ul>
</li>
</ol>
<h3 id="3-4-6-String类型"><a href="#3-4-6-String类型" class="headerlink" title="3.4.6 String类型"></a>3.4.6 <code>String</code>类型</h3><p>可以使用双引号（” “）、单引号（’ ‘）或反引号（` `）标示</p>
<h5 id="01-字符字面量"><a href="#01-字符字面量" class="headerlink" title="01. 字符字面量"></a>01. 字符字面量</h5><p>字符串数据类型包含一些字符字面量，用于表示非打印字符或其他用途字符</p>
<table>
<thead>
<tr>
<th align="center">字面量</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><code>\n</code></td>
<td>换行</td>
</tr>
<tr>
<td align="center"><code>\b</code></td>
<td>退格</td>
</tr>
<tr>
<td align="center"><code>\xnn</code></td>
<td>以十六进制编码<code>nn</code>表示的字符，例如\x41等于’A’</td>
</tr>
<tr>
<td align="center"><code>\unnnn</code></td>
<td>十六进制编码<code>nnnn</code>表示的Unicode字符，如\u03a3是希腊字母‘Σ’</td>
</tr>
</tbody></table>
<h5 id="02-字符串的特点（不可变）"><a href="#02-字符串的特点（不可变）" class="headerlink" title="02. 字符串的特点（不可变）"></a>02. 字符串的特点（不可变）</h5><p>字符串一旦创建就不可变，修改字符串的值时先销毁原字符串后将包含新值的另一个字符串保存到该变量。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> lang = <span class="hljs-string">&quot;Java&quot;</span>;<br>lang = lang + <span class="hljs-string">&quot;Script&quot;</span>;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>这里，变量lang 一开始包含字符串”Java” 。紧接着，lang 被重新定义为包含”Java” 和”Script” 的组合，也就是”JavaScript” 。整个过程首先会分配一个足够容纳10个字符的空间，然后填充上”Java” 和”Script” 。最后销毁原始的字符串”Java” 和字符串”Script” ，因为这两个字符串都没有用了。所有处理都是在后台发生的。</p>
</blockquote>
<h5 id="03-转换为字符串"><a href="#03-转换为字符串" class="headerlink" title="03. 转换为字符串"></a>03. 转换为字符串</h5><ul>
<li><p><code>toString()</code>：</p>
<ul>
<li><p>将数值、布尔值、对象、字符串型转换为字符串型，<code>null</code>和<code>undefined</code>没有<code>toString()</code>方法。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> a = <span class="hljs-number">11</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a.<span class="hljs-title function_">toString</span>(),<span class="hljs-keyword">typeof</span> a.<span class="hljs-title function_">toString</span>());<span class="hljs-comment">//“11”，string </span><br></code></pre></td></tr></table></figure>
</li>
<li><p>对数值调用方法时可以接受一个数值参数，以确定将数值转换为何种进制下的字符串。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> num = <span class="hljs-number">10</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num.<span class="hljs-title function_">toString</span>()); <span class="hljs-comment">// &quot;10&quot; </span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num.<span class="hljs-title function_">toString</span>(<span class="hljs-number">2</span>)); <span class="hljs-comment">// &quot;1010&quot; </span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num.<span class="hljs-title function_">toString</span>(<span class="hljs-number">8</span>)); <span class="hljs-comment">// &quot;12&quot; </span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num.<span class="hljs-title function_">toString</span>(<span class="hljs-number">10</span>)); <span class="hljs-comment">// &quot;10&quot; </span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num.<span class="hljs-title function_">toString</span>(<span class="hljs-number">16</span>)); <span class="hljs-comment">// &quot;a&quot;</span><br></code></pre></td></tr></table></figure></li>
</ul>
</li>
<li><p><code>String()</code>：</p>
<ul>
<li>如果值有<code>toString()</code>方法则调用该方法（不传参）返回结果；</li>
<li>如果值为<code>null</code>或<code>undefined</code>则返回<code>null</code>或<code>undefined</code>。</li>
</ul>
</li>
<li><p>用<code>加号操作符</code>给一个值加上空字符串<code>&quot;&quot;</code>也可以</p>
</li>
</ul>
<h5 id="04-模板字面量"><a href="#04-模板字面量" class="headerlink" title="04. 模板字面量"></a>04. 模板字面量</h5><ul>
<li>模板字面量用`   `反引号包裹，保留空格和换行字符，可以跨行定义字符串</li>
</ul>
<h5 id="05-字符串插值"><a href="#05-字符串插值" class="headerlink" title="05. 字符串插值"></a>05. 字符串插值</h5><ul>
<li>技术上讲模板字面量并不是字符串而是求值结果为字符串的句法表达式</li>
<li>利用<code>$&#123;&#125;</code>可以在模板字面量中插值，所有插入的值都会使用<code>toString()</code>强制转换为字符串，任何js表达式都可用于插值。</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> value = <span class="hljs-number">5</span>;<br><span class="hljs-keyword">let</span> exponent = <span class="hljs-string">&#x27;second&#x27;</span>; <br><span class="hljs-keyword">let</span> sentence = <span class="hljs-string">`<span class="hljs-subst">$&#123; value &#125;</span> to the <span class="hljs-subst">$&#123; exponent &#125;</span> power is <span class="hljs-subst">$&#123; value * value &#125;</span>`</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(sentence);<br><span class="hljs-comment">// 5 to the second power is 25</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`Hello, <span class="hljs-subst">$&#123; <span class="hljs-string">`World`</span> &#125;</span>!`</span>); <br><span class="hljs-comment">// Hello, World!</span><br><span class="hljs-comment">//将表达式转换为字符串时调用toString()方法</span><br><span class="hljs-keyword">let</span> foo = &#123; <span class="hljs-attr">toString</span>: <span class="hljs-function">() =&gt;</span> <span class="hljs-string">&#x27;World&#x27;</span> &#125;;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`Hello, <span class="hljs-subst">$&#123; foo &#125;</span>!`</span>);<br><span class="hljs-comment">// Hello, World!</span><br></code></pre></td></tr></table></figure>

<ul>
<li>在插值表达式中可以调用函数和方法，也可以插入自己之前的值</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> value = <span class="hljs-string">&#x27;&#x27;</span>;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">append</span>(<span class="hljs-params"></span>) &#123;<br>    value = <span class="hljs-string">`<span class="hljs-subst">$&#123;value&#125;</span>abc`</span>;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);<br>&#125; <br><span class="hljs-title function_">append</span>(); <span class="hljs-comment">// abc </span><br><span class="hljs-title function_">append</span>(); <span class="hljs-comment">// abcabc </span><br><span class="hljs-title function_">append</span>(); <span class="hljs-comment">// abcabcabc</span><br></code></pre></td></tr></table></figure>

<h5 id="06-模板字面量标签函数"><a href="#06-模板字面量标签函数" class="headerlink" title="06. 模板字面量标签函数"></a>06. 模板字面量标签函数</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> name = <span class="hljs-string">&#x27;asd&#x27;</span>,age = <span class="hljs-number">3</span>;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">hans</span>(<span class="hljs-params">arg1, arg2, arg3</span>)&#123;<br>    <span class="hljs-keyword">let</span> b = [arg1,arg2,arg3];<br>    <span class="hljs-keyword">return</span> b;<br>&#125;<br><span class="hljs-keyword">let</span> a = hans<span class="hljs-string">`<span class="hljs-subst">$&#123;name&#125;</span>, I&#x27;m <span class="hljs-subst">$&#123;age&#125;</span> years old.`</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a)<br><span class="hljs-comment">//[ [ &#x27;&#x27;, &quot;, I&#x27;m &quot;, &#x27; years old.&#x27; ], &#x27;asd&#x27;, 3 ]</span><br></code></pre></td></tr></table></figure>

<p>这里的<code>hans</code>就是标签函数，其接受的参数依次是<strong>原始字符串数组</strong>和<strong>对每个插值表达式求值的结果</strong>，这里的a[0][0]是空串，因为在第一个表达式（${name}）的位置对模板字面量进行分割时左边没有内容。<br>由于表达式参数的数量可变，通常用剩余操作符（…）收集到一个数组中</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> a = <span class="hljs-number">6</span>, b = <span class="hljs-number">9</span>;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">simpleTag</span>(<span class="hljs-params">strings, ...expressions</span>) &#123;<br>  	<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(strings);<span class="hljs-comment">//输出原模板串</span><br>  	<span class="hljs-keyword">for</span>(<span class="hljs-keyword">const</span> i <span class="hljs-keyword">of</span> expressions) &#123;<br>    	<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(i);<span class="hljs-comment">//依次输出各表达式结果</span><br>  	&#125;<br>  	<span class="hljs-comment">// for(const i in expressions)&#123;</span><br>  	<span class="hljs-comment">//     console.log(expressions[i]);</span><br>  	<span class="hljs-comment">// &#125;</span><br>&#125;<br><span class="hljs-keyword">let</span> taggedResult = simpleTag<span class="hljs-string">`<span class="hljs-subst">$&#123; a &#125;</span> + <span class="hljs-subst">$&#123; b &#125;</span> = <span class="hljs-subst">$&#123; a + b &#125;</span>`</span>;<br></code></pre></td></tr></table></figure>

<h5 id="07-原始字符串"><a href="#07-原始字符串" class="headerlink" title="07. 原始字符串"></a>07. 原始字符串</h5><ul>
<li><p>利用<code>String.raw</code>标签函数获取模板字面量的原始内容</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">// Unicode示例 </span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`\u00A9`</span>); <span class="hljs-comment">// ©</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">String</span>.<span class="hljs-property">raw</span><span class="hljs-string">`\u00A9`</span>); <span class="hljs-comment">// \u00A9 </span><br><span class="hljs-comment">// 换行符示例 </span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`first line\nsecond line`</span>); <br><span class="hljs-comment">// first line </span><br><span class="hljs-comment">// second line </span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">String</span>.<span class="hljs-property">raw</span><span class="hljs-string">`first line\nsecond line`</span>); <br><span class="hljs-comment">// &quot;first line\nsecond line&quot; </span><br><span class="hljs-comment">// 对实际的换行符来说是不行的 </span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`first line </span><br><span class="hljs-string">second line`</span>); <br><span class="hljs-comment">// first line </span><br><span class="hljs-comment">// second line </span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">String</span>.<span class="hljs-property">raw</span><span class="hljs-string">`first line </span><br><span class="hljs-string">second line`</span>); <br><span class="hljs-comment">// first line </span><br><span class="hljs-comment">// second line</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>也可以用标签函数的第一个参数，即<code>模板字符串数组.raw</code>获取原始内容</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> name = <span class="hljs-string">&#x27;asd&#x27;</span>,age = <span class="hljs-number">3</span>;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">hans</span>(<span class="hljs-params">arg1</span>)&#123;<br>    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">const</span> b <span class="hljs-keyword">of</span> arg1) <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(b);<br>    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">const</span> b <span class="hljs-keyword">of</span> arg1.<span class="hljs-property">raw</span>) <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(b);<br>&#125;<br><span class="hljs-keyword">let</span> a = hans<span class="hljs-string">`<span class="hljs-subst">$&#123;name&#125;</span>\t\u00a7I&#x27;m <span class="hljs-subst">$&#123;age&#125;</span> years old.`</span><br></code></pre></td></tr></table></figure>

<p>结果为</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">//(空串)</span><br><span class="hljs-comment">//	§I&#x27;m </span><br><span class="hljs-comment">//years old.</span><br><span class="hljs-comment">//(空串)</span><br><span class="hljs-comment">//\t\u00a7I&#x27;m </span><br><span class="hljs-comment">//years old.</span><br></code></pre></td></tr></table></figure></li>
</ul>
<h3 id="3-4-7-Symbol类型"><a href="#3-4-7-Symbol类型" class="headerlink" title="3.4.7 Symbol类型+++++"></a>3.4.7 <code>Symbol</code>类型+++++</h3><p><code>ES6</code>新增，符号是原始值。<br>符号用途：确保对象属性使用唯一标识符，不会发生属性冲突</p>
<h5 id="01-基本用法"><a href="#01-基本用法" class="headerlink" title="01. 基本用法"></a>01. 基本用法</h5><p>用Symbol()函数初始化，使用typeof操作符返回symbol；</p>
<p>也可以传入一个字符串参数作为对符号的描述，将来可以通过这个字符串来调试代码</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> <span class="hljs-title class_">Sym</span> = <span class="hljs-title class_">Symbol</span>();<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> <span class="hljs-title class_">Sym</span>); <span class="hljs-comment">// symbol</span><br><span class="hljs-keyword">let</span> fooSym = <span class="hljs-title class_">Symbol</span>(<span class="hljs-string">&quot;foo&quot;</span>);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Sym</span> == fooSym); <span class="hljs-comment">// false</span><br></code></pre></td></tr></table></figure>

<p>符号没有字面量语法，只要创建Symbol()实例并将其用作对象的新属性，就可以保证它不会覆盖已有的对象属性；</p>
<p>Symbol()函数不能用作构造函数，想用符号包装对象，可以用Object()函数：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> myBoolean = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Boolean</span>();<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> myBoolean); <span class="hljs-comment">// &quot;object&quot;</span><br><span class="hljs-keyword">let</span> myString = <span class="hljs-keyword">new</span> <span class="hljs-title class_">String</span>();<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> myString); <span class="hljs-comment">// &quot;object&quot;</span><br><span class="hljs-keyword">let</span> myNumber = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Number</span>();<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> myNumber); <span class="hljs-comment">// &quot;object&quot;</span><br><span class="hljs-keyword">let</span> mySymbol = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Symbol</span>(); <br><span class="hljs-comment">// TypeError: Symbol is not a constructor</span><br><span class="hljs-keyword">let</span> mySymbol = <span class="hljs-title class_">Symbol</span>();<br><span class="hljs-keyword">let</span> myWrappedSymbol = <span class="hljs-title class_">Object</span>(mySymbol);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> myWrappedSymbol); <span class="hljs-comment">// &quot;object&quot;</span><br></code></pre></td></tr></table></figure>

<h5 id="02-使用全局符号注册表"><a href="#02-使用全局符号注册表" class="headerlink" title="02. 使用全局符号注册表"></a>02. 使用全局符号注册表</h5><h5 id="03-使用符号作为属性"><a href="#03-使用符号作为属性" class="headerlink" title="03. 使用符号作为属性"></a>03. 使用符号作为属性</h5><h5 id="04-常用内置符号"><a href="#04-常用内置符号" class="headerlink" title="04. 常用内置符号"></a>04. 常用内置符号</h5><h5 id="05-Symbol-asyncIterator"><a href="#05-Symbol-asyncIterator" class="headerlink" title="05. Symbol.asyncIterator"></a>05. Symbol.asyncIterator</h5><h5 id="06-Symbol-hasInstance"><a href="#06-Symbol-hasInstance" class="headerlink" title="06. Symbol.hasInstance"></a>06. Symbol.hasInstance</h5><h5 id="07-Symbol-isConcatSpreadable"><a href="#07-Symbol-isConcatSpreadable" class="headerlink" title="07. Symbol.isConcatSpreadable"></a>07. Symbol.isConcatSpreadable</h5><h5 id="08-Symbol-iterator"><a href="#08-Symbol-iterator" class="headerlink" title="08. Symbol.iterator"></a>08. Symbol.iterator</h5><h5 id="09-Symbol-match"><a href="#09-Symbol-match" class="headerlink" title="09. Symbol.match"></a>09. Symbol.match</h5><h5 id="10-Symbol-replace"><a href="#10-Symbol-replace" class="headerlink" title="10. Symbol.replace"></a>10. Symbol.replace</h5><h5 id="11-Symbol-search"><a href="#11-Symbol-search" class="headerlink" title="11.Symbol.search"></a>11.Symbol.search</h5><h5 id="12-Symbol-species"><a href="#12-Symbol-species" class="headerlink" title="12.Symbol.species"></a>12.Symbol.species</h5><h5 id="13-Symbol-split"><a href="#13-Symbol-split" class="headerlink" title="13. Symbol.split"></a>13. Symbol.split</h5><h5 id="14-Symbol-toPrimitive"><a href="#14-Symbol-toPrimitive" class="headerlink" title="14. Symbol.toPrimitive"></a>14. Symbol.toPrimitive</h5><h5 id="15-Symbol-toStringTag"><a href="#15-Symbol-toStringTag" class="headerlink" title="15. Symbol.toStringTag"></a>15. Symbol.toStringTag</h5><h5 id="16-Symbol-unscopables"><a href="#16-Symbol-unscopables" class="headerlink" title="16. Symbol.unscopables"></a>16. Symbol.unscopables</h5><h3 id="3-4-8-Object类型"><a href="#3-4-8-Object类型" class="headerlink" title="3.4.8 Object类型"></a>3.4.8 <code>Object</code>类型</h3><p>一组数据与功能的集合<br>通过new操作符+对象名称创建<br>每个Object 实例都有如下属性和方法。 </p>
<ul>
<li><code>hasOwnProperty(propertyName)</code> ：用于判断当前对象实例 （不是原型）上是否存在给定的属性。要检查的<strong>属性名必须是字符串</strong>（如<code>o.hasOwnProperty(&quot;name&quot;)</code>）或符号。 </li>
<li><code>isPrototypeOf(object)</code> ：用于判断当前对象是否为另一个对象的原型。 </li>
<li><code>propertyIsEnumerable(propertyName)</code>：用于判断给定的属性是否可以使用<code>for-in</code>语句枚举。与<code>hasOwnProperty()</code>一样，<strong>属性名必须是字符串</strong>。</li>
<li><code>toLocaleString()</code>：返回对象的字符串表示，该字符串反映对象所在的本地化执行环境。</li>
<li><code>toString()</code>：返回对象的字符串表示。 </li>
<li><code>valueOf()</code>：返回对象对应的字符串、数值或布尔值表示。通常与 <code>toString()</code>的返回值相同。</li>
</ul>
<h2 id="3-5-操作符"><a href="#3-5-操作符" class="headerlink" title="3.5 操作符"></a>3.5 操作符</h2><p>包括<strong>数学操作符</strong>、<strong>位操作符</strong>、<strong>关系操作符</strong>等。</p>
<h3 id="3-5-1-一元操作符"><a href="#3-5-1-一元操作符" class="headerlink" title="3.5.1 一元操作符"></a>3.5.1 一元操作符</h3><h5 id="01-递增、递减操作符"><a href="#01-递增、递减操作符" class="headerlink" title="01. 递增、递减操作符"></a>01. 递增、递减操作符</h5><p>++、–，同C语言；<br>可以作用于任何类型，&#x3D;&#x3D;操作后均转换为数值类型&#x3D;&#x3D;：</p>
<ul>
<li><strong>字符串类型：</strong> 非有效数值形式变为NaN，有效数值类型则转换为数值后进行运算</li>
<li>对象：调用其<code>valueOf()</code>方法取得可操作的值，如果是NaN则调用<code>toString()</code>方法。</li>
<li><code>null</code>：相当于 0</li>
</ul>
<h5 id="02-一元加减"><a href="#02-一元加减" class="headerlink" title="02. 一元加减"></a>02. 一元加减</h5><p>一元加应用到非数值时会执行与<a href="#hsNumber"><code>Number()</code>转型函数</a>一样的类型转换，一元减先转换后变为负。</p>
<h3 id="3-5-2-位操作符"><a href="#3-5-2-位操作符" class="headerlink" title="3.5.2.位操作符"></a>3.5.2.位操作符</h3><p>只需要考虑32位整数即可。（64位数值会转换为32位数值，执行位操作后再把结果从32位转换为64位存储，但导致<code>NaN</code>与<code>Infinity</code>在位操作时会被当成0处理）<br>前31位表示整数值，第32位符号位，0正1负；符号位决定其余部分的存储：</p>
<ul>
<li><p>符号位为0（正值）：以二进制格式存储，31位中每一位都代表2的幂。第一个位置（第一位，第0位）表示$2^0$，第二位表示$2^1$。</p>
</li>
<li><p>符号位为1（负值）：以二进制编码的补码存储。</p>
<p>补码转换（以8位的-18为例，正数补码是其本身）：</p>
<ol>
<li><p>绝对值的二进制（带符号位）：10010010；</p>
</li>
<li><p>求反码：11101101；</p>
</li>
<li><p>加一：11101110。</p>
<p>详见<a href="#f1">附录：计算机数字编码方式</a>。</p>
</li>
</ol>
</li>
</ul>
<h5 id="01-按位非"><a href="#01-按位非" class="headerlink" title="01. 按位非~"></a>01. 按位非<code>~</code></h5><p>返回数值的反码</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> num1 = <span class="hljs-number">25</span>; 		<span class="hljs-comment">// 二进制0000000000011001</span><br><span class="hljs-keyword">let</span> num2 = ~num1; 	<span class="hljs-comment">// 二进制1111111111100110</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num2); 	<span class="hljs-comment">// -26</span><br></code></pre></td></tr></table></figure>

<h5 id="02-按位与"><a href="#02-按位与" class="headerlink" title="02. 按位与&amp;"></a>02. 按位与<code>&amp;</code></h5><p>相当于对两操作数的二进制的每一位执行<code>&amp;&amp;</code></p>
<table>
<thead>
<tr>
<th align="center">a</th>
<th align="center">b</th>
<th align="center">a&amp;b</th>
</tr>
</thead>
<tbody><tr>
<td align="center">1</td>
<td align="center">1</td>
<td align="center">1</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center">0</td>
<td align="center">0</td>
</tr>
<tr>
<td align="center">0</td>
<td align="center">1</td>
<td align="center">0</td>
</tr>
<tr>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0</td>
</tr>
</tbody></table>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> result = <span class="hljs-number">25</span> &amp; <span class="hljs-number">3</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result); <span class="hljs-comment">// 1</span><br><span class="hljs-comment">// 0000 0000 0001 1001 -&gt; 25</span><br><span class="hljs-comment">// 0000 0000 0000 0011 -&gt; 03</span><br><span class="hljs-comment">// -------对每一位进行与-------</span><br><span class="hljs-comment">// 0000 0000 0000 0001 -&gt; 01</span><br></code></pre></td></tr></table></figure>

<h5 id="03-按位或"><a href="#03-按位或" class="headerlink" title="03. 按位或|"></a>03. 按位或<code>|</code></h5><p>相当于对两操作数的二进制的每一位执行<code>||</code></p>
<table>
<thead>
<tr>
<th align="center">a</th>
<th align="center">b</th>
<th align="center">a|b</th>
</tr>
</thead>
<tbody><tr>
<td align="center">1</td>
<td align="center">1</td>
<td align="center">1</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center">0</td>
<td align="center">1</td>
</tr>
<tr>
<td align="center">0</td>
<td align="center">1</td>
<td align="center">1</td>
</tr>
<tr>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0</td>
</tr>
</tbody></table>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> result = <span class="hljs-number">25</span> | <span class="hljs-number">3</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result); <span class="hljs-comment">// 27</span><br><span class="hljs-comment">// 0000 0000 0001 1001 -&gt; 25</span><br><span class="hljs-comment">// 0000 0000 0000 0011 -&gt; 03</span><br><span class="hljs-comment">// -------对每一位进行或-------</span><br><span class="hljs-comment">// 0000 0000 0001 1011 -&gt; 27</span><br></code></pre></td></tr></table></figure>

<h5 id="04-按位异或"><a href="#04-按位异或" class="headerlink" title="04. 按位异或^"></a>04. 按位异或<code>^</code></h5><p>两个同位上的数字相同时返回0，不同返回1。</p>
<table>
<thead>
<tr>
<th align="center">a</th>
<th align="center">b</th>
<th align="center">a^b</th>
</tr>
</thead>
<tbody><tr>
<td align="center">1</td>
<td align="center">1</td>
<td align="center">0</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center">0</td>
<td align="center">1</td>
</tr>
<tr>
<td align="center">0</td>
<td align="center">1</td>
<td align="center">1</td>
</tr>
<tr>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0</td>
</tr>
</tbody></table>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> result = <span class="hljs-number">25</span> ^ <span class="hljs-number">3</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result); <span class="hljs-comment">// 26</span><br><span class="hljs-comment">// 0000 0000 0001 1001 -&gt; 25</span><br><span class="hljs-comment">// 0000 0000 0000 0011 -&gt; 03</span><br><span class="hljs-comment">// ------对每一位进行异或------</span><br><span class="hljs-comment">// 0000 0000 0001 1010 -&gt; 26</span><br></code></pre></td></tr></table></figure>

<h5 id="05-左移"><a href="#05-左移" class="headerlink" title="05. 左移&lt;&lt;"></a>05. 左移<code>&lt;&lt;</code></h5><p>按指定位数将数值所有位向左移动，右端用0补全</p>
<p>左移会保留操作数值的符号</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> a1 = <span class="hljs-number">2</span>; <span class="hljs-comment">// 等于二进制10</span><br><span class="hljs-keyword">let</span> a2 = a1 &lt;&lt; <span class="hljs-number">5</span>; <span class="hljs-comment">// 等于二进制1000000，即十进制64</span><br></code></pre></td></tr></table></figure>

<h5 id="06-有符号右移"><a href="#06-有符号右移" class="headerlink" title="06. 有符号右移&gt;&gt;"></a>06. 有符号右移<code>&gt;&gt;</code></h5><p>右移同时保留符号，左移的逆运算。</p>
<p>右移后空位出现在左侧，且在符号位右侧，需要用符号位的值填充空位</p>
<h5 id="07-无符号右移"><a href="#07-无符号右移" class="headerlink" title="07. 无符号右移&gt;&gt;&gt;"></a>07. 无符号右移<code>&gt;&gt;&gt;</code></h5><p>正数的<code>&gt;&gt;</code>和<code>&gt;&gt;&gt;</code>结果相同；</p>
<p>负数的空位补零（有符号右移<code>&gt;&gt;</code>的空位补符号位的值）</p>
<h3 id="3-5-3-布尔操作符"><a href="#3-5-3-布尔操作符" class="headerlink" title="3.5.3 布尔操作符"></a>3.5.3 布尔操作符</h3><h5 id="01-逻辑非"><a href="#01-逻辑非" class="headerlink" title="01. 逻辑非!"></a>01. 逻辑非<code>!</code></h5><p>将操作符转换为布尔型后取反</p>
<p>操作数为</p>
<ul>
<li>对象：返回<code>false</code></li>
<li>空字符串：返回<code>true</code></li>
<li>非空字符串：返回<code>false</code></li>
<li>非零数值（包括<code>Infinity</code>）：返回<code>false</code></li>
<li><code>null</code>、<code>NaN</code>、<code>undefined</code>：返回<code>true</code></li>
</ul>
<h5 id="02-逻辑与"><a href="#02-逻辑与" class="headerlink" title="02. 逻辑与&amp;&amp;"></a>02. 逻辑与<code>&amp;&amp;</code></h5><table>
<thead>
<tr>
<th align="center">a</th>
<th align="center">b</th>
<th align="center">a&amp;&amp;b</th>
</tr>
</thead>
<tbody><tr>
<td align="center">1</td>
<td align="center">1</td>
<td align="center">1</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center">0</td>
<td align="center">0</td>
</tr>
<tr>
<td align="center">0</td>
<td align="center">1</td>
<td align="center">0</td>
</tr>
<tr>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0</td>
</tr>
<tr>
<td align="center">对象</td>
<td align="center"></td>
<td align="center">b</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">对象</td>
<td align="center">a求值为true时返回a</td>
</tr>
<tr>
<td align="center">对象</td>
<td align="center">对象</td>
<td align="center">b</td>
</tr>
</tbody></table>
<p>任一操作数为<code>null</code>、<code>NaN</code>、<code>undefined</code>时返回<code>null</code>、<code>NaN</code>、<code>undefined</code></p>
<p>短路操作符，第一个操作数为<code>false</code>时不用考虑第二个操作数直接返回<code>false</code></p>
<h5 id="03-逻辑或"><a href="#03-逻辑或" class="headerlink" title="03. 逻辑或||"></a>03. 逻辑或<code>||</code></h5><table>
<thead>
<tr>
<th align="center">a</th>
<th align="center">b</th>
<th align="center">a&amp;&amp;b</th>
</tr>
</thead>
<tbody><tr>
<td align="center">1</td>
<td align="center">1</td>
<td align="center">1</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center">0</td>
<td align="center">1</td>
</tr>
<tr>
<td align="center">0</td>
<td align="center">1</td>
<td align="center">1</td>
</tr>
<tr>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0</td>
</tr>
<tr>
<td align="center">对象</td>
<td align="center"></td>
<td align="center">a</td>
</tr>
<tr>
<td align="center">false</td>
<td align="center"></td>
<td align="center">b</td>
</tr>
</tbody></table>
<p>两操作数都为<code>null</code>、<code>NaN</code>、<code>undefined</code>时返回<code>null</code>、<code>NaN</code>、<code>undefined</code></p>
<p>短路操作符，第一个操作数为<code>true</code>时不用考虑第二个操作数直接返回<code>true</code></p>
<p><strong>常用于赋值：</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> a = a1 || a2;    <br></code></pre></td></tr></table></figure>

<p><code>a1</code>不为<code>null</code>时<code>a=a1</code>；<code>a1</code>为<code>null</code>时<code>a=a2</code></p>
<h3 id="3-5-4-乘性运算符"><a href="#3-5-4-乘性运算符" class="headerlink" title="3.5.4 乘性运算符"></a>3.5.4 乘性运算符</h3><p>如果操作数不是数值，则先在后台用<code>Number()</code> 函数转换为数值，然后再应用运算规则。</p>
<h5 id="1-乘法"><a href="#1-乘法" class="headerlink" title="1. 乘法"></a>1. 乘法</h5><ul>
<li>任一操作数是<code>NaN</code>，返回<code>NaN</code>。</li>
<li><code>Infinity</code>乘以0，返回<code>NaN</code>。</li>
<li><code>Infinity</code>乘以非0有限值，返回<code>Infinity</code>或<code>-Infinity</code> 。</li>
<li><code>Infinity</code>乘以<code>Infinity</code>，返回<code>Infinity</code> 。 </li>
<li>不是数值的操作数，则先在后台用<code>Number()</code>将其转换为 数值，然后再应用上述规则。</li>
</ul>
<h5 id="2-除法"><a href="#2-除法" class="headerlink" title="2. 除法"></a>2. 除法</h5><ul>
<li>如果是<code>Infinity</code> 除以<code>Infinity</code> ，返回<code>NaN</code> 。</li>
<li>0除以0，返回<code>NaN</code> 。 </li>
<li>非0有限值除以0，返回 <code>Infinity</code> 或<code>-Infinity</code> 。 </li>
<li><code>Infinity</code> 除以任何数值，返回<code>Infinity</code>或<code>-Infinity</code>。</li>
<li>不是数值的操作数，则先在后台用<code>Number()</code>函数将其转 换为数值，然后再应用上述规则。</li>
</ul>
<h5 id="3-取模"><a href="#3-取模" class="headerlink" title="3. 取模"></a>3. 取模</h5><ul>
<li>无限值 % 有限值 &#x3D; NaN 。 </li>
<li>有限值 % 0 &#x3D; NaN 。</li>
<li>有限值a % 无限值 &#x3D; a。</li>
<li><code>Infinity</code> % <code>Infinity</code>，则返回<code>NaN</code> 。</li>
<li>0 % 非0 &#x3D; 0；</li>
</ul>
<h5 id="4-指数"><a href="#4-指数" class="headerlink" title="4. 指数"></a>4. 指数</h5><p>$a^b$：<code>Math.pow(a,b)</code>或<code>a**b</code></p>
<h3 id="3-5-6-加性操作符"><a href="#3-5-6-加性操作符" class="headerlink" title="3.5.6 加性操作符"></a>3.5.6 加性操作符</h3><h5 id="1-加法"><a href="#1-加法" class="headerlink" title="1. 加法"></a>1. 加法</h5><ul>
<li><p>任一操作数是NaN，返回NaN ；</p>
</li>
<li><p><code>Infinity</code> + <code>Infinity</code> &#x3D; <code>Infinity</code>；<br><code>-Infinity</code> + <code>-Infinity</code> &#x3D; <code>-Infinity</code>；</p>
</li>
<li><p><code>Infinity</code> + <code>-Infinity</code> &#x3D; <code>NaN</code> ； </p>
</li>
<li><p><code>+0</code> + <code>+0</code> &#x3D; <code>+0</code>；<br><code>-0</code> + <code>+0</code> &#x3D; <code>+0</code>；<br><code>-0</code> + <code>-0</code> &#x3D; <code>-0</code></p>
</li>
<li><p>其中一个操作数为字符串时：</p>
<p>将另一个操作数转换为字符串后拼接</p>
<p>若另一个操作数也是字符串则直接拼接；</p>
<p>对于是对象、数值或布尔值的操作数则调用<code>toString()</code>方法；</p>
<p>对于<code>undefined</code>和<code>null</code>，调用<code>String()</code>函数获取<code>undefined</code>或<code>null</code></p>
</li>
</ul>
<h5 id="2-减法"><a href="#2-减法" class="headerlink" title="2. 减法"></a>2. 减法</h5><ul>
<li><code>+0</code> - <code>+0 </code>&#x3D; <code>+0</code><br><code>+0</code> - <code>-0 </code>&#x3D; <code>+0</code><br><code>-0</code> - <code>-0 </code>&#x3D; <code>+0</code>  </li>
<li>任一操作数是字符串、布尔值、<code>null</code>或<code>undefined</code>：<br>先使用<code>Number()</code>将其转换为数值，再根据前面的规则执行数学运算。如果转换结果是NaN ，则计算结果是 NaN 。</li>
<li>任一操作数是对象：<br>调用其<code>valueOf()</code>方法表示数值。如果是NaN ，则计算结果是NaN 。<br>如果对 象没有valueOf() 方法，则调用其toString() 方法，然后再 将得到的字符串转换为数值。</li>
</ul>
<h3 id="3-5-7-关系操作符"><a href="#3-5-7-关系操作符" class="headerlink" title="3.5.7 关系操作符"></a>3.5.7 关系操作符</h3><p><code>&gt;</code>、<code>&lt;</code>、<code>&gt;=</code>、<code>&lt;=</code></p>
<ul>
<li>其他类型与数字比较时将其他类型转换为数值</li>
<li>任意操作数是对象时调用<code>valueOf()</code>方法，没有该方法就用<code>toString()</code>；</li>
<li>任何关系操作符在涉及<code>NaN</code>时都返回<code>false</code>。</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">//比较字典顺序时注意大小写一致</span><br><span class="hljs-keyword">let</span> a = <span class="hljs-string">&quot;Brick&quot;</span>, b = <span class="hljs-string">&quot;alphabet&quot;</span>;<br><span class="hljs-keyword">let</span> result = a.<span class="hljs-title function_">toLowerCase</span>() &lt; b.<span class="hljs-title function_">toLowerCase</span>(); <span class="hljs-comment">// false</span><br></code></pre></td></tr></table></figure>

<h3 id="3-5-8-相等操作符"><a href="#3-5-8-相等操作符" class="headerlink" title="3.5.8 相等操作符"></a>3.5.8 相等操作符</h3><h5 id="1-等于和不等于"><a href="#1-等于和不等于" class="headerlink" title="1. 等于和不等于==,!="></a>1. 等于和不等于<code>==,!=</code></h5><p>先进行强制类型转换再比较</p>
<p><strong>转换规则：</strong></p>
<ul>
<li>字符串与数字比较：将字符串转换为数字后比较</li>
<li>其中一个操作数为对象：调用<code>valueOf()</code></li>
</ul>
<p><strong>比较原则：</strong></p>
<ul>
<li><code>null</code>和<code>undefined</code>相等。 <code>null</code>和<code>undefined</code>不能转换为其他类型的值再进行比较。</li>
<li>任一操作数是NaN，则相等操作符返回false ，不相等操作符返回true 。<br><code>NaN</code> &#x3D;&#x3D; <code>NaN</code>返回<code>false</code>（<code>NaN</code>不等于<code>NaN</code>）。 </li>
<li>两个操作数都是对象，则比较它们是不是同一个对象。<br>如果两个操作数都指向同一个对象，则相等操作符返回<code>true</code></li>
</ul>
<h5 id="2-全等和不全等"><a href="#2-全等和不全等" class="headerlink" title="2. 全等和不全等===,!=="></a>2. 全等和不全等<code>===,!==</code></h5><p>严格判断（值、数据类型）</p>
<p><code>null</code> &#x3D;&#x3D;&#x3D; <code>undefined</code> 返回<code>false</code></p>
<h3 id="3-5-9-条件操作符"><a href="#3-5-9-条件操作符" class="headerlink" title="3.5.9 条件操作符"></a>3.5.9 条件操作符</h3><p>语句1?语句2:语句3</p>
<h3 id="3-5-10-赋值操作符"><a href="#3-5-10-赋值操作符" class="headerlink" title="3.5.10 赋值操作符"></a>3.5.10 赋值操作符</h3><p><code>=</code>、<code>+=</code>、<code>&gt;&gt;&gt;=</code>等简写（不会提升性能）</p>
<h3 id="3-5-11-逗号操作符"><a href="#3-5-11-逗号操作符" class="headerlink" title="3.5.11 逗号操作符"></a>3.5.11 逗号操作符</h3><p>,</p>
<h2 id="3-6-语句"><a href="#3-6-语句" class="headerlink" title="3.6 语句"></a>3.6 语句</h2><h3 id="3-6-1-if语句"><a href="#3-6-1-if语句" class="headerlink" title="3.6.1 if语句"></a>3.6.1 <code>if</code>语句</h3><h3 id="3-6-2-do-while语句"><a href="#3-6-2-do-while语句" class="headerlink" title="3.6.2 do-while语句"></a>3.6.2 <code>do-while</code>语句</h3><h3 id="3-6-3-while语句"><a href="#3-6-3-while语句" class="headerlink" title="3.6.3 while语句"></a>3.6.3 <code>while</code>语句</h3><h3 id="3-6-4-for语句"><a href="#3-6-4-for语句" class="headerlink" title="3.6.4 for语句"></a>3.6.4 <code>for</code>语句</h3><h3 id="3-6-5-for-in语句"><a href="#3-6-5-for-in语句" class="headerlink" title="3.6.5 for-in语句"></a>3.6.5 <code>for-in</code>语句</h3><p>遍历（枚举）对象中的非符号键属性</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> obj = &#123; <span class="hljs-attr">a</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">c</span>: <span class="hljs-number">3</span> &#125;;<br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> prop <span class="hljs-keyword">in</span> obj) &#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;obj.&quot;</span> + prop + <span class="hljs-string">&quot; = &quot;</span> + obj[prop]);<br>&#125;<br><br><span class="hljs-comment">// &quot;obj.a = 1&quot;</span><br><span class="hljs-comment">// &quot;obj.b = 2&quot;</span><br><span class="hljs-comment">// &quot;obj.c = 3&quot;</span><br></code></pre></td></tr></table></figure>

<p>如果<code>for-in</code>循环要迭代的变量是<code>null</code>或<code>undefined</code>，则不执行循环体。</p>
<p>所有可枚举的属性都会返回一次，但返回的顺序可能会因浏览器而异。</p>
<p>如果<code>for-in</code>循环要迭代的变量是<code>null</code>或<code>undefined</code>不执行循环体。</p>
<h3 id="3-6-6-for-of语句"><a href="#3-6-6-for-of语句" class="headerlink" title="3.6.6 for-of语句"></a>3.6.6 <code>for-of</code>语句</h3><p>可用于遍历可迭代对象（数组、Map、Set等）的元素</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> iterable = [<span class="hljs-number">10</span>, <span class="hljs-number">20</span>, <span class="hljs-number">30</span>];<br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> value <span class="hljs-keyword">of</span> iterable) &#123;<br>    value += <span class="hljs-number">1</span>;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);<br>&#125;<br><span class="hljs-comment">// 11</span><br><span class="hljs-comment">// 21</span><br><span class="hljs-comment">// 31</span><br></code></pre></td></tr></table></figure>

<p>for-of 循环会按照可迭代对象的next() 方法产生值的顺序迭代元素。</p>
<h3 id="3-6-7-标签语句"><a href="#3-6-7-标签语句" class="headerlink" title="3.6.7 标签语句"></a>3.6.7 标签语句</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-attr">abc</span>: <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; count; i++) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(i);<br>&#125;<br></code></pre></td></tr></table></figure>

<p><code>abc</code>是一个标签，可以通过<code>break</code>或<code>continue</code>语句引用，可用于嵌套循环</p>
<h3 id="3-6-8-break和continue语句"><a href="#3-6-8-break和continue语句" class="headerlink" title="3.6.8 break和continue语句"></a>3.6.8 <code>break</code>和<code>continue</code>语句</h3><p>break提前跳出循环执行循环后的语句；</p>
<p>continue提前结束本次循环，判断循环条件后继续执行循环语句</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> num1 = <span class="hljs-number">0</span>, num2 = <span class="hljs-number">0</span>;<br><span class="hljs-attr">outermost1</span>:<br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; <span class="hljs-number">10</span>; i++) &#123;<br>	<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> j = <span class="hljs-number">0</span>; j &lt; <span class="hljs-number">10</span>; j++) &#123;<br>		<span class="hljs-keyword">if</span> (i == <span class="hljs-number">5</span> &amp;&amp; j == <span class="hljs-number">5</span>) &#123;<br>			<span class="hljs-keyword">continue</span> outermost1;<br>		&#125;<br>		num1++;<br>	&#125;<br>&#125;<br><span class="hljs-attr">outermost2</span>:<br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; <span class="hljs-number">10</span>; i++) &#123;<br>	<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> j = <span class="hljs-number">0</span>; j &lt; <span class="hljs-number">10</span>; j++) &#123;<br>		<span class="hljs-keyword">if</span> (i == <span class="hljs-number">5</span> &amp;&amp; j == <span class="hljs-number">5</span>) &#123;<br>			<span class="hljs-keyword">break</span> outermost2;<br>		&#125;<br>		num2++;<br>	&#125;<br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num1,num2); <span class="hljs-comment">// 95 55</span><br></code></pre></td></tr></table></figure>

<h3 id="3-6-9-with语句"><a href="#3-6-9-with语句" class="headerlink" title="3.6.9 with语句"></a>3.6.9 <code>with</code>语句</h3><p>将代码作用域设置为特定对象</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> qs = location.<span class="hljs-property">search</span>.<span class="hljs-title function_">substring</span>(<span class="hljs-number">1</span>);<br><span class="hljs-keyword">let</span> hostName = location.<span class="hljs-property">hostname</span>;<br><span class="hljs-keyword">let</span> url = location.<span class="hljs-property">href</span>;<br><span class="hljs-comment">//转换为</span><br><span class="hljs-title function_">with</span>(<span class="hljs-params">location</span>) &#123;<br>    <span class="hljs-keyword">let</span> qs = search.<span class="hljs-title function_">substring</span>(<span class="hljs-number">1</span>);<br>    <span class="hljs-keyword">let</span> hostName = hostname;<br>    <span class="hljs-keyword">let</span> url = href;<br>&#125;<br></code></pre></td></tr></table></figure>

<p>在<code>with</code>语句中，每个变量首先会被认为是局部变量，没有找到该局部变量则搜索<code>location</code>对象，看他是否有一个同名属性。</p>
<p><strong>不推荐使用，严格模式不能使用，会抛出错误</strong></p>
<h3 id="3-6-10-switch语句"><a href="#3-6-10-switch语句" class="headerlink" title="3.6.10 switch语句"></a>3.6.10 <code>switch</code>语句</h3><p>与C大体相同；可以用于匹配所有数据类型</p>
<p><code>switch</code>语句在比较条件时使用<strong>全等操作符</strong>（严格相等），</p>
<h2 id="3-7-函数"><a href="#3-7-函数" class="headerlink" title="3.7 函数"></a>3.7 函数</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">function</span> 函数名(参数<span class="hljs-number">1</span>, 参数<span class="hljs-number">2</span>, 参数<span class="hljs-number">3</span>, ......)&#123;<br>    语句<br>&#125;<br></code></pre></td></tr></table></figure>

<p>严格模式限制：</p>
<ul>
<li>不能以<code>eval</code>或<code>arguments</code>作为函数名或函数参数名</li>
<li>两个命名参数不能为同一个名称</li>
</ul>

                
              </div>
            
            <hr/>
            <div>
              <div class="post-metas my-3">
  
  
    <div class="post-meta">
      <i class="iconfont icon-tags"></i>
      
        <a href="/blog/tags/Javascript/" class="print-no-link">#Javascript</a>
      
        <a href="/blog/tags/%E7%BA%A2%E5%AE%9D%E4%B9%A6/" class="print-no-link">#红宝书</a>
      
        <a href="/blog/tags/web/" class="print-no-link">#web</a>
      
    </div>
  
</div>


              
  

  <div class="license-box my-3">
    <div class="license-title">
      <div>JS红宝书第三章学习笔记</div>
      <div>https://isolace.gitee.io/blog/2023/11/15/JS红宝书第三章学习笔记/</div>
    </div>
    <div class="license-meta">
      
        <div class="license-meta-item">
          <div>作者</div>
          <div>Solace</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>发布于</div>
          <div>2023年11月15日</div>
        </div>
      
      
      
        <div class="license-meta-item">
          <div>许可协议</div>
          <div>
            
              
              
                <a class="print-no-link" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
                  <span class="hint--top hint--rounded" aria-label="BY - 署名">
                    <i class="iconfont icon-by"></i>
                  </span>
                </a>
              
            
          </div>
        </div>
      
    </div>
    <div class="license-icon iconfont"></div>
  </div>



              
                <div class="post-prevnext my-3">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/blog/2023/11/17/JS%E7%BA%A2%E5%AE%9D%E4%B9%A6%E7%AC%AC%E5%9B%9B%E7%AB%A0%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" title="JS红宝书第四章学习笔记">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">JS红宝书第四章学习笔记</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/blog/2023/11/13/JS%E7%BA%A2%E5%AE%9D%E4%B9%A6%E7%AC%AC%E4%B8%80%E3%80%81%E4%BA%8C%E7%AB%A0%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" title="JS红宝书第一、二章学习笔记">
                        <span class="hidden-mobile">JS红宝书第一、二章学习笔记</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
  
  
    <article id="comments" lazyload>
      
  <div id="twikoo"></div>
  <script type="text/javascript">
    Fluid.utils.loadComments('#comments', function() {
      Fluid.utils.createScript('https://lib.baomitu.com/twikoo/1.6.8/twikoo.all.min.js', function() {
        var options = Object.assign(
          {"envId":"https://imaginative-rabanadas-4bf3ac.netlify.app/.netlify/functions/twikoo","region":"AWS / N. Virginia (us-east-1)","path":"window.location.pathname"},
          {
            el: '#twikoo',
            path: 'window.location.pathname',
            onCommentLoaded: function() {
              Fluid.utils.listenDOMLoaded(function() {
                var imgSelector = '#twikoo .tk-content img:not(.tk-owo-emotion)';
                Fluid.plugins.imageCaption(imgSelector);
                Fluid.plugins.fancyBox(imgSelector);
              });
            }
          }
        )
        twikoo.init(options)
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the comments</noscript>


    </article>
  


          </article>
        </div>
      </div>
    </div>

    <div class="side-col d-none d-lg-block col-lg-2">
      

    </div>
  </div>
</div>





  



  



  



  



  


  
  









    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
       <span>Solace</span><br> <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
    </div>
  
  
    <div class="statistics">
  
  

  
    
      <span id="busuanzi_container_site_pv" style="display: none">
        总访问量 
        <span id="busuanzi_value_site_pv"></span>
         次
      </span>
    
    
      <span id="busuanzi_container_site_uv" style="display: none">
        总访客数 
        <span id="busuanzi_value_site_uv"></span>
         人
      </span>
    
    
  
</div>

  
  
  
</div>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.4/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/blog/js/events.js" ></script>
<script  src="/blog/js/plugins.js" ></script>





  
    <script  src="/blog/js/img-lazyload.js" ></script>
  




  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.20.1/tocbot.min.js', function() {
    var toc = jQuery('#toc');
    if (toc.length === 0 || !window.tocbot) { return; }
    var boardCtn = jQuery('#board-ctn');
    var boardTop = boardCtn.offset().top;

    window.tocbot.init(Object.assign({
      tocSelector     : '#toc-body',
      contentSelector : '.markdown-body',
      linkClass       : 'tocbot-link',
      activeLinkClass : 'tocbot-active-link',
      listClass       : 'tocbot-list',
      isCollapsedClass: 'tocbot-is-collapsed',
      collapsibleClass: 'tocbot-is-collapsible',
      scrollSmooth    : true,
      includeTitleTags: true,
      headingsOffset  : -boardTop,
    }, CONFIG.toc));
    if (toc.find('.toc-list-item').length > 0) {
      toc.css('visibility', 'visible');
    }

    Fluid.events.registerRefreshCallback(function() {
      if ('tocbot' in window) {
        tocbot.refresh();
        var toc = jQuery('#toc');
        if (toc.length === 0 || !tocbot) {
          return;
        }
        if (toc.find('.toc-list-item').length > 0) {
          toc.css('visibility', 'visible');
        }
      }
    });
  });
</script>


  <script src=https://lib.baomitu.com/clipboard.js/2.0.11/clipboard.min.js></script>

  <script>Fluid.plugins.codeWidget();</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
    window.anchors.options = {
      placement: CONFIG.anchorjs.placement,
      visible  : CONFIG.anchorjs.visible
    };
    if (CONFIG.anchorjs.icon) {
      window.anchors.options.icon = CONFIG.anchorjs.icon;
    }
    var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
    var res = [];
    for (var item of el) {
      res.push('.markdown-body > ' + item.trim());
    }
    if (CONFIG.anchorjs.placement === 'left') {
      window.anchors.options.class = 'anchorjs-link-left';
    }
    window.anchors.add(res.join(', '));

    Fluid.events.registerRefreshCallback(function() {
      if ('anchors' in window) {
        anchors.removeAll();
        var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
        var res = [];
        for (var item of el) {
          res.push('.markdown-body > ' + item.trim());
        }
        if (CONFIG.anchorjs.placement === 'left') {
          anchors.options.class = 'anchorjs-link-left';
        }
        anchors.add(res.join(', '));
      }
    });
  });
</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
    Fluid.plugins.fancyBox();
  });
</script>


  <script>Fluid.plugins.imageCaption();</script>

  
      <script>
        if (!window.MathJax) {
          window.MathJax = {
            tex    : {
              inlineMath: { '[+]': [['$', '$']] }
            },
            loader : {
              load: ['ui/lazy']
            },
            options: {
              renderActions: {
                insertedScript: [200, () => {
                  document.querySelectorAll('mjx-container').forEach(node => {
                    let target = node.parentNode;
                    if (target.nodeName.toLowerCase() === 'li') {
                      target.parentNode.classList.add('has-jax');
                    }
                  });
                }, '', false]
              }
            }
          };
        } else {
          MathJax.startup.document.state(0);
          MathJax.texReset();
          MathJax.typeset();
          MathJax.typesetPromise();
        }

        Fluid.events.registerRefreshCallback(function() {
          if ('MathJax' in window && MathJax.startup.document && typeof MathJax.startup.document.state === 'function') {
            MathJax.startup.document.state(0);
            MathJax.texReset();
            MathJax.typeset();
            MathJax.typesetPromise();
          }
        });
      </script>
    

  <script  src="https://lib.baomitu.com/mathjax/3.2.2/es5/tex-mml-chtml.js" ></script>

  <script  src="/blog/js/local-search.js" ></script>

  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>





<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/blog/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
</body>
</html>
